<template>
	<!-- 20221009 -->
	<view class="register-get-code-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view v-if="canSendCode" class="text-28 text-1a" @click="getCode">获取验证码</view>
			<view v-else class="text-right text-28 text-4d">{{second}}s</view>
		</view>
		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js';
	import request from '@/components/hzjc/utils/request.js';
	export default {
		props: {
			// 需要接受验证码的手机号
			mobilePhone: {
				type: String,
				default: ''
			},
			/* 发送验证码的类型 
				1 -- 注册或登录发送验证码
				2 - -绑定手机号
				3 -- 修改密码
				4 -- 换绑手机号验证之前手机号
				5 -- 换绑手机号绑定新手机号 */
			type: {
				type: Number,
				default: 1
			},
			// 最大倒计时时间,单位秒
			maxSecond: {
				type: Number,
				default: 60
			}
		},

		data() {
			return {
				// 是否可以点击
				canClick: true,
				// 是否可以发送验证码
				canSendCode: true,
				// 当前倒计时时间,单位秒
				second: 60,
				// 验证码
				code: "",
				// 倒计时计时器
				codeIntervalTimer: ''
			}
		},

		created() {
			// 当前时间为最大倒计时时间
			this.second = this.maxSecond
		},

		methods: {

			/** 
			 * 获取手机验证码
			 * @date 2022-10-09
			 */
			getCode() {
				if (this.mobilePhone.length != 11) {
					common.alert('请输入正确的手机号')
					return false
				}

				// 是否可以点击
				if (!this.canClick) {
					return false
				}
				
				// 更改为不可点击
				this.canClick = false

				// 发送验证码
				request.getData("base/user/api/Login/sendCodeMessage", {
					mobile_phone: this.mobilePhone,
					type: this.type
				}).then(res => {
					// 更改为可以点击
					this.canClick = true
					
					if (res.code == 0) {
						// 更改为不可以发送验证码
						this.canSendCode = false
						
						common.toast('发送成功')
						
						// 每秒执行
						this.codeIntervalTimer = setInterval(() => {
							// 倒计时秒数递减
							this.second--
							
							if (this.second <= 0) {
								// 倒计时秒数重置为最大秒数
								this.second = this.maxSecond
								
								// 更改为不可以发送验证码
								this.canSendCode = true
								
								// 清空定时器
								clearInterval(this.codeIntervalTimer)
							}
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped>

</style>
